<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item>佣金比例设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" ref="content">
      <div class="rateTips">
        <h2>温馨提示：</h2>
        <p v-for="item in vue_rateTips">{{item.tip}}</p>
      </div>
      <div class="rate-border"></div>
      <p class="rate-title">
        <span>邀请会员注册：</span>
        <i>（佣金固定金额，固定比例只能选择一种！）</i>
      </p>
      <div class="rate-body">
        <div class="rate-grade">
          <span v-for="item in vue_rateGrade">{{item.grade}}</span>
        </div>
        <div class="rate-form">
           <div class="one-rate">
             <span class="select-title"><em class="iconfont" :class="{green:vue_one_show}" @click="select_fixed">&#xe6f1;</em><i>启用固定金额模式</i></span>
             <el-form ref="form" :model="rateFixedForm" label-width="60px">
               <el-form-item label="佣金">
                 <el-input v-model="rateFixedForm.bonusRuleNum1" :disabled="!vue_one_show"></el-input>
                 <span>固定金额</span>
               </el-form-item>
               <el-form-item label="佣金">
                 <el-input v-model="rateFixedForm.bonusRuleNum2" :disabled="!vue_one_show"></el-input>
                 <span>固定金额</span>
               </el-form-item>
               <el-form-item label="佣金">
                 <el-input v-model="rateFixedForm.bonusRuleNum3" :disabled="!vue_one_show"></el-input>
                 <span>固定金额</span>
               </el-form-item>
             </el-form>
           </div>
          <div class="one-rate">
            <span class="select-title"><em class="iconfont" :class="{green:vue_two_show}" @click="select_percentage">&#xe6f1;</em><i>启用百分比模式</i></span>
            <el-form ref="form" :model="ratePercentForm" label-width="60px">
              <el-form-item label="佣金">
                <el-input v-model="ratePercentForm.bonusRuleNum1" :disabled="!vue_two_show"></el-input>
                <span>固定比例（%）</span>
              </el-form-item>
              <el-form-item label="佣金">
                <el-input v-model="ratePercentForm.bonusRuleNum2" :disabled="!vue_two_show"></el-input>
                <span>固定比例（%）</span>
              </el-form-item>
              <el-form-item label="佣金">
                <el-input v-model="ratePercentForm.bonusRuleNum3" :disabled="!vue_two_show"></el-input>
                <span>固定比例（%）</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="queren" style="">
        <el-button :disabled="clickBtn" type="primary" @click="saveRate">保存</el-button>
        <el-button @click="$router.push({path:'/index'})">返回</el-button>
      </div>
    </div>
    <!--end content-->
  </section>
</template>

<script>
  export default {
    data() {
      return {
       //温馨提示
        vue_rateTips:[
          {"tip":"关于佣金比例设置的几点说明："},
          {"tip":"1、直属上级佣金，即分销商A获得奖励"},
          {"tip":"2、二级上级佣金，即分销商A的上级获得奖励"},
          {"tip":"3、三级上级佣金，即分销商A的上级的上级获得奖励"},
          {"tip":"4、除支持全店商品设置统一佣金比例额外，还可单独对某一商品设置佣金比例"},
        ],
       //分销等级
        vue_rateGrade:[
          {"grade":"直属上级佣金："},
          {"grade":"二级上级佣金："},
          {"grade":"三级上级佣金："},
        ],
        rateFixedForm:{},   //固定金额的form表单
        ratePercentForm:{},  //百分比的form表单
        vue_one_show:true,   //选择固定金额
        vue_two_show:false,   //选择固定比例
        clickBtn:false,      //请求数据后禁用按钮
        bonusRuleCode:"",    //保存提交时bonusRuleCode需要的数据
        bonusRuleType:"",    //保存提交时bonusRuleType需要的数据
        bonusRuleNum1:"",    //保存提交时bonusRuleNum1需要的数据
        bonusRuleNum2:"",    //保存提交时bonusRuleNum2需要的数据
        bonusRuleNum3:"",    //保存提交时bonusRuleNum3需要的数据
      }
    },
    methods: {
      //选择固定金额触发
      select_fixed(){
        this.vue_one_show = true;
        this.vue_two_show = false;
        this.rateFixedForm.bonusRuleType = 0;
        this.ratePercentForm.bonusRuleType = "";
        this.ratePercentForm.bonusRuleNum1 = "";
        this.ratePercentForm.bonusRuleNum2 = "";
        this.ratePercentForm.bonusRuleNum3 = "";
      },

      //选择百分比触发
      select_percentage(){
        this.vue_one_show = false;
        this.vue_two_show = true;
        this.ratePercentForm.bonusRuleType = 1;
        this.rateFixedForm.bonusRuleType = "";
        this.rateFixedForm.bonusRuleNum1 = "";
        this.rateFixedForm.bonusRuleNum2 = "";
        this.rateFixedForm.bonusRuleNum3 = "";
      },

      //保存按钮触发
      saveRate(){
          if(this.ratePercentForm.bonusRuleType == 1){
            this.bonusRuleType = this.ratePercentForm.bonusRuleType;
            if(this.ratePercentForm.bonusRuleNum1){
              this.bonusRuleNum1 = this.ratePercentForm.bonusRuleNum1;
            }else{
              this.bonusRuleNum1 = 0;
            }
            if(this.ratePercentForm.bonusRuleNum2){
              this.bonusRuleNum2 = this.ratePercentForm.bonusRuleNum2;
            }else{
              this.bonusRuleNum2 = 0;
            }
            if(this.ratePercentForm.bonusRuleNum3){
              this.bonusRuleNum3 = this.ratePercentForm.bonusRuleNum3;
            }else{
              this.bonusRuleNum3 = 0;
            }
          }else{
            this.bonusRuleType = this.rateFixedForm.bonusRuleType;
            if(this.rateFixedForm.bonusRuleNum1){
              this.bonusRuleNum1 = this.rateFixedForm.bonusRuleNum1;
            }else{
              this.bonusRuleNum1 = 0;
            }
            if(this.rateFixedForm.bonusRuleNum2){
              this.bonusRuleNum2 = this.rateFixedForm.bonusRuleNum2;
            }else{
              this.bonusRuleNum2 = 0;
            }
            if(this.rateFixedForm.bonusRuleNum3){
              this.bonusRuleNum3 = this.rateFixedForm.bonusRuleNum3;
            }else{
              this.bonusRuleNum3 = 0;
            }
          }
          this.clickBtn=!this.clickBtn;
          this.axios({
            method: 'put',
            url:"/v3/agent/bonusRules/"+this.bonusRuleCode,
            data:{
              "bonusRuleType":this.bonusRuleType,
              "bonusRuleNum1":this.bonusRuleNum1,
              "bonusRuleNum2":this.bonusRuleNum2,
              "bonusRuleNum3":this.bonusRuleNum3,
            }
          }).then((res) => {
            this.clickBtn=!this.clickBtn;
            this.queryInfo();
            this.Public.openSuccess(this,"操作成功！")
          }).catch((err)=>{
            this.Public.openError(this,err.response.data);
            this.clickBtn=!this.clickBtn;
          });
      },

      //初始化页面
      queryInfo(){
        this.axios({
          method: 'post',
          url:"/v3/agent/bonusRules/queryByCmember",
          data:{}
        }).then((res) => {
           this.bonusRuleCode = res.data.bonusRuleCode;
           if(res.data.bonusRuleType == 1){
             this.ratePercentForm = res.data;
             this.vue_two_show = true;
             this.vue_one_show = false;
           }else{
             this.rateFixedForm = res.data;
             this.vue_two_show = false;
             this.vue_one_show = true;
           }
        }).catch((err)=>{
           this.Public.openError(this,err.response.data)
        });
      },

    },

    created(){
       //初始化请求
       this.queryInfo();
    },

    mounted() {
      //动态设置高度
      this.$refs.content.style.height = (document.documentElement.clientHeight - 194)+"px";
      this.vue_tableHeight = document.documentElement.clientHeight - 240;
    },

  }
</script>

<style scoped>

  .queren{
    position: fixed;
    bottom: 0px;
    margin-left: -15px;
    width: 87%;
    background: #fff;
    height: 80px;
    z-index: 10;
  }

  .queren a{
    display: inline-block;
    height: 34px;
    line-height: 34px;
    background: #fff!important;
    border: 1px solid #cdd9e6 ;
    color: #666!important;
    width: 86px;
    border-radius:20px;
    text-align: center;
    margin: 20px 20px 0px 10px;
    box-sizing: border-box;
  }
  .queren .baocun{
    color: #fff!important;
    background: #13C19F!important;
    z-index: 100;
    cursor: pointer;
    border: 0;
    margin-left: 30px;
  }

  .green{
    color: green;
  }

  .select-title i{
    line-height: 48px;
    margin-left: 10px;
  }

  .select-title em{
    font-size: 26px!important;
    cursor: pointer;
    float: left;
  }

  .select-title{
    display: block;
    margin:0 0px 5px 22px;

  }

  .one-rate{
    width: 300px;
    float: left;
  }

  .rate-form{
    float: left;
    width: 600px;
    border:1px #dddddd solid;
  }

  .rate-grade span{
    display: block;
    padding: 60px 0 0 0;
    text-align: center;
    line-height: 20px;

  }

  .rate-grade{
    float: left;
    width: 150px;
  }

  .rate-body{
    margin-top: 20px;
  }

  .rate-title span{
    color: #03B8CC;
    font-size: 15px;
  }

  .rate-title i{
    color: #999999;
  }

  .rate-border{
    border-bottom: 2px #ddd dashed;
    margin: 30px 0;
  }

  .rateTips p{
    line-height: 25px;
  }

  .rateTips h2{
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px 0;
  }
  .rateTips{
    padding: 15px 0 15px 15px;
    border:1px #dddddd solid;
  }
  .location {
    padding: 3px 0 15px 0;
  }
  .content {
    position: relative;
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
  }
  .fade-enter,.fade-leave-active {
    opacity: 0
  }
  .fade-enter-active,.fade-leave-active {
    transition: .4s;
  }
</style>
